<template>
  <div class='app-container'>
    <div class='app-box clearfix'>
      <div class='clearfix1'>
        <el-form label-width="80px">
          <!-- <el-form-item label="政策类型：" prop='insurance' class='inputtitle' style='color:#333'>
          <el-select v-model="id4" placeholder="请选择政策类型" class='inputbox' @change='getinsurancestaffs' size='mini'>
            <el-option v-for="item in policy" :key="item.id" :label="item.content
    " :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
          <el-form-item label="保险公司：" prop='insurance' class='inputtitle'>
            <el-select v-model="insurance" placeholder="请选择保险公司" class='inputbox' size='mini' @change='getinsurancestaffs'>
              <el-option-group v-for="group in items" :key="group.letter" :label="group.letter">
                <el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName
      " :value="item.id">
                </el-option>
              </el-option-group>
            </el-select>
          </el-form-item>
          <el-form-item label="适用工号：" prop='gonghao' class='inputtitle'>
            <el-select v-model="gonghao" placeholder="请选择工号" size='mini' class='inputbox'>
              <el-option v-for="item in items1" :key="item.id" :label="item.staffAccount" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="政策类型：" prop='insurance' class='inputtitle wd180' style='color:#333'>
            <el-select v-model="id4" placeholder="请选择政策类型" class='inputbox' size='mini'>
              <el-option v-for="item in policy" :key="item.id" :label="item.content
    " :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-input v-model="ip" size="mini" class="wd150 inputtitle" placeholder="请输入批次名称" @keyup.enter.native='search()'></el-input>
        </el-form>

        <!-- <el-button size="mini" type="info" v-on:click='search()' class='btn fontcolor inputtitle'>搜索</el-button> -->
        <el-button type="primary" icon="iconfont icon-search" size="mini" class='btn fontcolor inputtitle' v-on:click='search()'>搜索</el-button>
      </div>
      <div class='util-tab'>
        <el-table :data="list" style="width: 100%" class='uti-table' stripe v-loading="loading">
          <el-table-column slot="empty">
            <div class="nodata">
              暂无数据
            </div>
          </el-table-column>
          <el-table-column prop="batchName" label="批次名称">
            <template slot-scope='scope'>
              <!--<span class='pici lianjie batch' @click='tojump1(scope.row.id)'>
                            {{scope.row.batchName}}
                        </span>-->
              <a class="link_color" v-if="scope.row.batchType !== 2">
                <router-link class='pici lianjie batch' :to="{ name: 'policylower3_list', query: { batchId: scope.row.id,Jurisdiction:1}}">
                  {{scope.row.batchName}}
                </router-link>
              </a>
              <a class="link_color" v-if="scope.row.batchType == 2">
                <router-link class='pici lianjie batch' :to="{ name: 'policylower3s', query: { batchId: scope.row.id,Jurisdiction:1}}">
                  {{scope.row.batchName}}
                </router-link>
              </a>
              <!--<span v-if='scope.row.state==1' class='pici lianjie batch' @click='tojump2(scope.row.id)'>
                            {{scope.row.batchName}}
                        </span>
                         <span v-else-if='scope.row.state==2' class='pici lianjie batch' @click='tojump2(scope.row.id)'>
                            {{scope.row.batchName}}
                        </span>
                        <span v-else-if='scope.row.state==3' class='pici lianjie batch' @click='tojump2(scope.row.id)'>
                            {{scope.row.batchName}}
                        </span>
                        <span v-else-if='scope.row.state==4' class='pici lianjie batch' @click='tojump2(scope.row.id)'>
                            {{scope.row.batchName}}
                        </span>
                         <span v-else-if='scope.row.state==5' class='pici lianjie batch' @click='tojump1(scope.row.id)'>
                            {{scope.row.batchName}}
                        </span>-->
              <span v-if='scope.row.isReward' class='reward'>奖励</span>
              <p class='time'>有效期：{{scope.row.effectiveDate}}&nbsp;到&nbsp;
                <span v-if='scope.row.expiryDate!=null'>{{scope.row.expiryDate}}</span>
                <span v-else>不限</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="insuranceName" label="保险公司" width="170">
            <template slot-scope='scope'>
              <p class='insurance'>
                {{scope.row.insuranceName}}
              </p>
            </template>
          </el-table-column>
          <el-table-column label="适用工号" width='210'>
            <!--  <template  slot-scope='scope' >
                    <span v-if="scope.row.staffs.length==1">{{scope.row.staffs[0].staffAccount}}&nbsp;({{scope.row.staffs[0].describe}})</span>
                        <el-tooltip placement="bottom" effect="light" v-if="scope.row.staffs.length>1">
                         <div slot="content" v-for='item in scope.row.staffs' class='prompt'>{{item.staffAccount}} &nbsp; ({{item.describe}})</br></div>
                         <span >{{scope.row.staffs[0].staffAccount}}&nbsp;({{scope.row.staffs[0].describe}})...</span>
                        </el-tooltip>
                        <el-badge :value="scope.row.staffs.length" :max="99" class="item" v-if="scope.row.staffs.length>1">
                        </el-badge>
                </template> -->
            <template slot-scope='scope'>
              <!--<span v-if="scope.row.staffs.length==1">{{scope.row.staffs[0]}}</span>-->
              <!--  <span v-if="scope.row.staffs.length==1">{{scope.row.staffs[0].staffAccount}}&nbsp;({{scope.row.staffs[0].describe}})</span>  -->
              <div>{{scope.row.staffs[0].staffAccount}}&nbsp;({{scope.row.staffs[0].describe}})</div>
              <el-tooltip placement="bottom" effect="light" v-if="scope.row.staffs.length>1" class='item1'>
                <div slot="content" v-for='item in scope.row.staffs' class='prompt'>{{item.staffAccount}} &nbsp; ({{item.describe}})</br>
                </div>
                <span class='morelist'>更多...</span>
              </el-tooltip>
              <!-- <el-badge :value="scope.row.staffs.length" :max="99" class="item" v-if="scope.row.staffs.length>1">
                        </el-badge> -->
            </template>
          </el-table-column>
          <el-table-column label="批次状态" width='170'>
            <template slot-scope="scope">
              <span type="text" size="small" v-if='scope.row.state==0'>
                <i class="icon iconfont icon-icon01" style="color:#027dca"></i>
                编辑中
              </span>
              <span type="text" size="small" v-if='scope.row.state==1'>
                <i class="icon iconfont icon-icon01" style="color:#FF7819"></i>
                待审批
              </span>
              <span type="text" size="small" v-if='scope.row.state==2'>
                <i class="icon iconfont icon-icon01" style="color:#389E0D"></i>
                等待生效
              </span>
              <span type="text" size="small" v-if='scope.row.state==3'>
                <i class="icon iconfont icon-icon01" style="color:#389E0D"></i>
                生效中
              </span>
              <span type="text" size="small" v-if='scope.row.state==4'>
                <i class="icon iconfont icon-icon01" style="color:#666"></i>
                已过期
              </span>
              <span type="text" size="small" v-if='scope.row.state==5'>
                <el-tooltip class="item" effect="light" placement="bottom">
                  <div slot="content" style="max-width:500px;">驳回原因：{{scope.row.dismissalSeason}}</div>
                  <span>
                    <i class="icon iconfont icon-icon01" style="color:#CF1322"></i>
                    已驳回</span>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="creationTime" label="操作" width='110' align='right'>
            <template slot-scope="scope">
              <div v-for='item in scope.row.operations' class='td-a'>
                <!--  <a type="text" size="small" v-if='item==0' style="color:#027dca" class='edit'>
                            编辑&nbsp &nbsp|
                        </a>  -->
                <template v-if="util.hasRule('Pages.Policy.DownPolicy.Edit')">
                  <router-link v-if='item==0&&scope.row.batchType !== 2' :to="{ name: 'policylower3_list', query: { batchId: scope.row.id,Jurisdiction:1}}" style="color:#027dca" size="small" class='edit links'>编辑</a>
                  </router-link>
                  <router-link v-if='item==0&&scope.row.batchType  == 2' :to="{ name: 'policylower3s', query: { batchId: scope.row.id,Jurisdiction:1}}" style="color:#027dca" size="small" class='edit links'>编辑</a>
                  </router-link>
                  <a type="text" size="small" v-if='item==1' style="color:#027dca" @click="open3(scope.row.id)">
                    申请编辑
                  </a>
                  <a type="text" size="small" v-if='item==2' style="color:#CF1322;margin-left: 10px;" @click="open2(scope.row.id)">删除 </a>
                  <a type="text" size="small" v-if='item==3' style="color:#027dca">
                    <template>
                      <a type="text" @click="toRoval(scope.row)" class='check links'>提交审核</a>
                      <el-dialog :close-on-click-modal='false' title="审核提示" style="text-align:left;" :visible.sync="dialogTableVisible" width="500px" class="toDis-dialog upper4-dialog">
                        <p class="dialog-tit">当前批次（{{copyobj.batchName}}）与以下政策批次有效时间重叠，点击“确定”，系统将在当前批次（{{copyobj.batchName}}）审核通过后自动修改重叠批次的截止时间为当前批次的开始时间 {{copyobj.effectiveDate}}</p>
                        <div class="dialog-max">
                          <div class="visi-wrp" v-for="(one_item,index) in existence">
                            <!--<div class="visi-wrp">-->
                            <div class="visi-list">
                              <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;批次名称：{{one_item.batchName}}</div>
                              <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;有效时间：{{one_item.effectiveDate}} 到
                                <span v-if="one_item.expiryDate">{{one_item.expiryDate}}</span>
                                <span v-else>不限</span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div slot="footer" class="dialog-footer">
                          <el-button class="upper4-sureBtn" @click="toEdit(scope.row.id)">去修改</el-button>
                          <el-button class="upper4-sureBtn" type="primary" @click="toRoval_sure(scope.row.id)">确 定</el-button>
                        </div>
                      </el-dialog>
                    </template>
                  </a>
                </template>
                <!--  <a type="text" size="small" v-if='item==4' style="color:#027dca" class='check'>
                            生成下游政策
                        </a>   -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="list.length!=0" class='page-right'>
        <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next" :total="pagetotal" class='util-page' size='mini'>
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@media screen and (max-width: 1311px) {
  .inputbox {
    width: 120px;
  }
}
.set10 {
  display: inline-block;
  padding: 0 10px;
}

.prompt {
  margin-top: 5px;
}

.inputtitle {
  float: left;
  margin-right: 20px;
  margin-left: 5px;
}

.bottom {
  clear: both;
  text-align: center;
}

.util-tab {
  margin-top: 30px;
  .morelist {
    color: #027dca;
  }
  .icon-icon01 {
    vertical-align: middle;
    font-size: 14px;
  }
  .check {
    display: inline-block;
  }
  .lianjie:hover {
    color: #027dca;
    cursor: pointer;
    text-decoration: underline;
  }
  .pici {
    font-size: 14px;
  }
  .batch {
    margin-bottom: 5px;
    margin-top: 8px;
    height: 20px;
    font-weight: 600;
  }
  .time {
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 6px;
    color: #666;
    height: 17px;
    line-height: 17px;
  }
  .reward {
    background-color: #ff7819;
    border-radius: 8px;
    color: #fff;
    padding: 0 5px;
    font-size: 11px;
    margin-left: 3px;
  }
  .td-a {
    display: inline-block;
  }
  .insurance {
    font-size: 16px;
  }
}

.page-right {
  float: right;
  margin-top: 50px;
}

.clearfix1 {
  height: 28px;
}

.clearfix1:after {
  content: "";
  display: block;
  clear: both;
}

.nodata {
  color: #97a8be;
  font-size: 18px;
  margin-top: -50px;
}
.visi-wrp {
  padding: 6px 0;
  box-sizing: border-box;
  width: 80%;
  margin: 0 auto;
  font-size: 12px;
  height: 60px;
  overflow-y: auto;
}
.app-container .policyupper3c .p-detail .dialog-tit {
  font-size: 14px;
}
.dialog-max {
  width: 100%;
  height: 200px;
  overflow-y: auto;
}
.link_color {
  color: #027dca;
}
</style>
<script>
export default {
  data() {
    return {
      loading: false,
      data: {},
      insurance: "",
      items1:{},
      options: "",
      gonghao: "",
      dialogTableVisible: false,
      dismissalSeason1: "",
      pagetotal: null,
      ip: "",
      currentPage: 1,
      insurances: [],
      list: [],
      items: "",
      id: "",
      options1: [],
      pageindex: 1,
      policy: [
        {
          id: "0",
          content: "全部政策"
        },
        {
          id: "1",
          content: "基本政策"
        },
        {
          id: "2",
          content: "附加政策"
        }
      ],
      id4: "0",
      copyobj: {},
      existence: []
    };
  },
  created() {
   
    this.groupList();
    if (this.$route.query.policyType) {
      this.id4 = this.$route.query.policyType;
    }
    if (this.$route.query.insuranceId) {
      this.insurance = this.$route.query.insuranceId;
      this.getinsurancestaffs(this.insurance);//insuranceId
    }else{
    	 this.getinsurancestaffs();
    }
    if (this.$route.query.staffId) {
      this.gonghao = this.$route.query.staffId;
    }
    if (this.$route.query.batchName) {
      this.ip = this.$route.query.batchName;
    }
    if (this.$route.query.pageIndex) {
      this.pageindex = this.$route.query.pageIndex;
    }
    this.datalist();
  },
  watch: {
    $route(to, from) {
      //this. .go(0);
      this.id4 = this.$route.query.policyType;
      this.insurance = this.$route.query.insuranceId;
      this.gonghao = this.$route.query.staffId;
      this.ip = this.$route.query.batchName;
      this.pageindex = this.$route.query.pageIndex;
     // this.getinsurancestaffs(this.insurance);
      this.datalist();
    }
  },

  methods: {
    getinsurancestaffs(val) {
      this.gonghao = "";
      let all = { id: "", staffAccount: "全部工号", describe: "" };
      let params = {
        id: val
      };
      this.post(params, "services/app/common/GetCurrentInsuranceStaffs").then(
        rs => {
        	console.log("shuju")
          console.log(rs);
          let result = rs.result.items;
          result.unshift(all);
          this.items1 = result;
          for (let i = 0; i < this.items1.length; i++) {
            //staffAccount
            if (this.items1[i].describe != "") {
              this.items1[i].staffAccount =
                this.items1[i].staffAccount +
                " (" +
                this.items1[i].describe +
                ")";
            } else {
              this.items1[i].staffAccount = this.items1[i].staffAccount;
            }
          }
          if (val == "" || val == null) {
            this.items1 = [];
            this.items1.push(all);
          }
        }
      );
    },
    groupList() {
      // let all = { id: "", insuranceName: "全部保险公司" };
      let params = {
        // id:val,
      };
      this.post(params, "services/app/common/GetGroupInsurances").then(re => {
        if (re.success) {
          this.items = re.result.items;
          let result = re.result.items;
          // result.unshift(all);
          console.log(result);
          this.options1 = result;
        }
      });
    },
    datalist() {
      this.loading = true;
      let params = {
        pageIndex: this.pageindex,
        policyType: this.id4,
        insuranceId: this.insurance, //保险公司ID
        staffId: this.gonghao,
        batchName: this.ip
      };
      this.post(params, "services/app/policy/GetLowerPolicyBatchList").then(
        rs => {
        	if(rs.success){
        		this.loading = false;
	          console.log(rs);
	          this.list = rs.result.items;
	          this.pagetotal = rs.result.totalCount;
	          this.options = rs.result.items.operations;
	          this.currentPage = this.pageindex;
        	}else{
        		this.loading = false;
	        		this.$notify.error({
	            title: "错误",
	            message: rs.error.message
	          });
        	}
          
        }
      );
    },
    open2(id) {
      const me = this;
      this.$confirm("此操作将永久删除该政策批次, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        type: "warning"
      }).then(() => {
        let params = {
          id: id
        };
        this.post(params, "services/app/policy/DeletePolicyBatch").then(rs => {
          if (rs.success) {
            this.$notify({
              title: "删除",
              message: "删除成功"
            });
            me.datalist(me.currentPage);
          }
        });
      });
    },
    open3(id) {
      const me = this;
      this.$confirm("确定要申请编辑?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        type: "warning"
      }).then(() => {
        let params = {
          policyBatchId: id
        };
        this.post(
          params,
          "services/app/policy/UpdatePolicyBatchStateToEditing"
        ).then(rs => {
          if (rs.success) {
            this.$notify({
              title: "提交成功",
              message: "您已成功申请编辑",
              type: "success",
              customClass: "el-notification-success"
            });
            me.datalist(me.currentPage);
          }
        });
      });
      // .catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   });
      // });
    },
    // toRovalPost(){
    //   let params={
    //         policyBatchId:id,
    //       }
    //         this.post(params,'services/app/policy/UpdatePolicyBatchStateToApprovalPending').then(re=>{
    //           if(re.success){
    //             this.$message({
    //               type: 'success',
    //               message: '提交成功!'
    //             });

    //           }
    //         });
    // },
    //提交审核（一级
    // toRoval(){
    //const me = this;
    //如果无冲突批次
    // if(this.oldPolicyBatchId==''){
    //   var txt = '确定审核通过吗？'
    // this.$confirm(txt, '审核提示', {
    //   confirmButtonText: '确定',
    //   cancelButtonText: '取消',
    //   cancelButtonClass:'toChange',
    //   confirmButtonClass: 'goAr',
    // type: 'warning'
    //   }).then(() => {
    //     this.toRovalPost();

    //   })

    // return false;
    // }

    //如果有冲突批次
    //     this.dialogTableVisible=true;

    // },
    //提交审核（二级
    // toRoval_sure(){
    //   this.dialogTableVisible=false;
    //   this.toRovalPost();
    // },
    //  open4(id) {
    //   const me=this
    //   this.$confirm('确定要提交审核?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //       let params={
    //         policyBatchId: id
    //       };
    //         this.post(
    //           params,
    //           "services/app/policy/UpdatePolicyBatchStateToApprovalPending "
    //         ).then(rs => {
    //           if (rs.success) {
    //             this.$notify({
    //               message: '提交审核',
    //             });
    //             me.datalist(me.currentPage)
    //           }
    //         })

    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消审核'
    //     });
    //   });
    // },
    toEdit(id) {
      this.$router.push({
        name: "policylower3_list",
        query: {
          batchId: id,
          Jurisdiction: 1
        }
      });
    },
    //提交审核post
    toRovalPost(id) {
      let params = {
        policyBatchId: id
      };
      this.post(
        params,
        "services/app/policy/UpdatePolicyBatchStateToApprovalPending"
      ).then(re => {
        if (re.success) {
          this.$notify({
            title: "提交成功",
            message: "您已成功提交审核",
            type: "success",
            customClass: "el-notification-success"
          });
          this.datalist();
        }else{
        	this.$notify.error({
							title: '错误',
							message: re.error.message
						});
        }
      });
    },
    //提交审核（一级
    toRoval(val) {
    	console.log(11111)
      let str = JSON.stringify(val);
      this.copyobj = JSON.parse(str);
      let params = {
        id: this.copyobj.id
      };
  			var txt = "确定提交审核吗？";
              this.$confirm(txt, "审核提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                cancelButtonClass: "toChange",
                confirmButtonClass: "goAr",
                closeOnClickModal: false
                // type: 'warning'
              }).then(() => {
                this.toRovalPost(this.copyobj.id);
              });
//    this.post(params, "services/app/policy/CheckEffectivedPolicyBatch").then(
//      res => {
//        if (res.success) {
//          let arr = [];
//          arr = res.result.items;
//          this.existence = arr;
//          console.log("existence");
//          console.log(this.existence);
//          //如果无冲突批次
//          if (this.existence.length == 0) {
//            var txt = "确定提交审核吗？";
//            this.$confirm(txt, "审核提示", {
//              confirmButtonText: "确定",
//              cancelButtonText: "取消",
//              cancelButtonClass: "toChange",
//              confirmButtonClass: "goAr",
//              closeOnClickModal: false
//              // type: 'warning'
//            }).then(() => {
//              this.toRovalPost(this.copyobj.id);
//            });
//          } else {
//            //如果有冲突批次
//            this.dialogTableVisible = true;
//          }
//        } else {
//          this.$notify.error({
//            title: "错误",
//            message: res.error.message
//          });
//        }
//      }
//    );
    },
    //提交审核（二级
    toRoval_sure() {
      this.dialogTableVisible = false;
      this.toRovalPost(this.copyobj.id);
    },
    search() {
      this.$router.push({
        name: "policydown",
        query: {
          pageIndex: 1,
          policyType: this.id4,
          insuranceId: this.insurance, //保险公司ID
          staffId: this.gonghao,
          batchName: this.ip,
          time:new Date().getTime()
        }
      });
    },
    tojump1(id) {
      this.$router.push({
        name: "policylower3_list",
        query: {
          batchId: id,
          Jurisdiction: 1
        }
      });
    },
    tojump2(id) {
      this.$router.push({
        name: "policylowerCdetail",
        query: {
          batchId: id,
          page: 0
        }
      });
    },
    groupList() {
      let all = {
        letter: "",
        insurances: [{ insuranceName: "全部保险公司", id: "" }]
      };
      let params = {
        // id:val,
      };
      this.post(params, "services/app/common/GetGroupInsurances").then(re => {
        if (re.success) {
          this.items = re.result.items;
          let result = re.result.items;
          result.unshift(all);
          console.log(result);
          this.options1 = result;
        }
      });
    },
    handleCurrentChange(val) {
      (this.currentPage = val),
        this.$router.push({
          name: "policydown",
          query: {
            policyType: this.id4,
            insuranceId: this.insurance, //保险公司ID
            staffId: this.gonghao,
            batchName: this.ip,
            pageIndex: this.currentPage,
            time:new Date().getTime()
          }
        });
    }
  }
};
</script>
